body {
    height: 100vh;
    margin:0;
    padding:0;
    position:relative;
}
#background {
    position:absolute;
    width:100%;
    height:100%;
}
button {
    border:none;
    cursor:pointer;
    margin: 0px;
    padding: 0px;
    outline: none;
    background: none;
    display:block;
}
p {
    color:rgb(116, 66, 1);
    font-weight: 500;
}
.blackShadow {
    position:fixed;
    width:100%;
    height:100%;
    background-color: rgba(88, 88, 88, 0.568);
    z-index: 1;
}
.blackShadow-remove {
    position:fixed;
    width:100%;
    height:100%;
    background-color: rgba(88, 88, 88, 0.568);
    z-index: -1;
}
#timeBox {
    position:absolute;
    border:1px solid black;
    width:32%;
    height:40px;
    left:2%;
    top:1.6%;
    border-radius:20px;
    background-color: brown;
    display:flex;
    align-items: center;
    justify-content: center;
}
.inline-Box {
    width:92%;
    height:30px;
    border-radius: 15px;
    background-color: rgb(255, 217, 0);
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
}
#timeBox .inline-Box,#moneyBox .inline-Box {
    overflow: hidden;
}
.shade {
    position:absolute;
    width:100%;
    height:50%;
    top:0;
    background-color: rgba(255, 255, 255, 0.418);
}
#timeBox p {
    margin:0;
    color:brown;
    font-size: 14px;
    margin:7px;
}
#moneyBox {
    position:absolute;
    border:1px solid black;
    width:52%;
    height:40px;
    right:2%;
    top:1.6%;
    border-radius:20px;
    background-color: brown;
    display:flex;
    align-items: center;
    justify-content: center;
}
#moneyBox .inline-Box {
    width:94%;
    justify-content:right;
}
#moneyBox #money {
    position:absolute;
    right:9%;
    color:brown;
    font-size: 14px;
}
#allChefBox, .gameBegin, .menu,.buyChef,.fryChef {
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    width:96%;
    top:14%;
    background-color: white;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
}
.big-allChefBox ,.gameBegin,.buyChef,.fryChef{
    height:35%;
}
.small-allChefBox {
    height:18%;
}
#allChefBox .inline-Box, #allCustomerBox .inline-Box,.gameBegin .inline-Box ,.menu .inline-Box,.buyChef .inline-Box,.fryChef .inline-Box {
    height:94.5%;
    width:96%;
    border-radius: 15px;
    flex-flow:wrap;
}
#allChefBox .inline-Box {
    justify-content: left;
}
#allChefBox .small-inline-Box {
    width:96%;
    height:91%;
    border-radius: 15px;
    background-color: rgb(255, 217, 0);
    position:relative;
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: left;
}
#allChefBox .shade {
    height:100%;
    left:0;
}
#allChefBox .chefBox {
    width:65px;
    height:65px;
    border-radius: 50%;
    margin:5% 6%;
    background-color: white;
    display:flex;
    align-items: center;
    justify-content: center;
    position:relative;
    display:none;
}
#allChefBox .chefBox .inline-Box{
    background-color: rgba(167, 167, 167, 0.863);
    border-radius: 50%;
    width:87%;
    height:87%;
    overflow: hidden;
}
.inline-Box-cooking1,.inline-Box-cooking2,.inline-Box-eating1,.inline-Box-eating2,.inline-Box-eating3,.inline-Box-eating4,.inline-Box-eating  {
    background-color: rgb(243, 123, 11);
    border-radius: 50%;
    width:87%;
    height:87%;
    position:relative;
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: center;
}
#allChefBox .chefBox .inline-Box-cooking2 {
    background-color: rgb(47, 106, 216);
}
#allChefBox .chefBox .chef-shade,.customer-shade {
    position:absolute;
    width:50%;
    height:100%;
    right:50%;
    background-color: rgba(255, 255, 255, 0.418);
}
#allChefBox .chefBox .addChef-shade {
    position:absolute;
    width:100%;
    height:100%;
    background-color: rgba(255, 255, 255, 0.418);
}
.cookingBar {
    position:absolute;
    background-color: white;
    width:65px;
    height:20px;
    top:90%;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    display:flex;
}
#allChefBox .cookingBar {
    display:none;
}
#allCustomerBox .customerBox .eatingBar {
    display:none;
}
.inline-Bar1,.inline-Bar2,.inline-Bar3,.inline-Bar4,.inline-Bar5 {
    width:92%;
    height:80%;
    background-color: rgb(243, 123, 11);
    position:relative;
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: center;
}
#allChefBox .chefBox .cookingBar .inline-Bar2 {
    background-color: rgb(47, 106, 216);
}
#allChefBox .chefBox .cookingBar .dish, #allCustomerBox .customerBox .eatingBar .dish,.wait{
    color:white;
    margin:0;
    font-size: 10px;
}
#allChefBox .chefBox .cookerImg ,.menu .customerImg, #allCustomerBox .customerImg{
    position:absolute;
    width:65px;
    height:65px;
    top:-4px;
}
#allChefBox .chefBox .cookerImg,#allCustomerBox .customerImg {
    display:none;
}
#allChefBox .chefBox .plateImg {
    position:absolute;
    width:56px;
    height:56px;
    right:35%;
    bottom:-7px;
    display:none;
}
.multiplyBox {
    position:absolute;
    width:20px;
    height:20px;
    left:80%;
    top:0;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg); 
}
.multiplyBox .inline-multiplyBox {
    display:none;
}
.addBox {
    position:absolute;
    width:20px;
    height:20px;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    align-items: center;
    justify-content: center;
    display:none;
}
#allChefBox .chefBox .inline-multiplyBox {
    position:relative;
    width:100%;
    height:100%;
}
#allChefBox .chefBox .inline-multiplyBox .multiplyRow {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    height:5px;
    width:20px;
    background-color: rgb(194, 160, 49);
}
#allChefBox .chefBox .inline-multiplyBox .multiplyColumn {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    height:20px;
    width:5px;
    background-color: rgb(194, 160, 49);
}
#allChefBox .chefBox .addCookerImgBox {
    position:absolute;
    top:0;
    width:65px;
    height:65px;
    overflow:hidden;
    display:none;
}
#allChefBox .chefBox .addCookerImg {
    position:absolute;
    width:65px;
    height:65px;
    top:0;
    left:-60px;
    filter:drop-shadow( 60px 0 0px white);
}
#allCustomerBox {
    position:absolute;
    left:50%;
    top:51.2%;
    transform: translateX(-50%);
    width:96%;
    height:36%;
    background-color: white;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
#allCustomerBox .inline-Box {
    background-color: rgb(253, 142, 51);
    position:relative;
}
.customerBox,.waitCustomerBox {
    width:65px;
    height:65px;
    border-radius: 50%;
    margin:0 22% 0 5%;
    background-color: white;
    display:flex;
    align-items: center;
    justify-content: center;
    position:relative;
}
#allCustomerBox .waitCustomerBox {
    display:none;
}
.inline-Box-eating1 {
    background-color: rgb(175, 2, 2);
}
.inline-Box-eating2 {
    background-color: rgb(253, 142, 51);
}
.inline-Box-eating3 {
    background-color: green;
}
.inline-Box-eating {
    background-color: rgba(167, 167, 167, 0.863);
}
.inline-Box-eating4 {
    background-color: rgb(28, 97, 245);
}
#allCustomerBox .customerBox .eatingBar{
    position:absolute;
    background-color: white;
    width:65px;
    height:20px;
    left:80%;
    border-radius: 2px;
    display:flex;
    align-items: center;
    justify-content: center;
    display:none;
}
.eatingBar .finished1,.eatingBar .finished2,.eatingBar .finished3 {
    position:absolute;
    width:20px;
    height:20px;
    background-color: rgb(175, 2, 2);
    left:65px;
    border:2.2px solid white;
    border-radius: 50%;
    padding:0;
    display:flex;
    align-items: center;
    justify-content: center;
    display:none;
}
.eatingBar .finished2 {
    background-color: green;
}
.eatingBar .finished3 {
    background-color: rgb(253, 142, 51);
}
#allCustomerBox .customerBox .eatingBar img {
    width:26px;
    height:26px;
    position:relative;
    left:0.3px;
}
#allCustomerBox .customerBox .eatingBar:nth-of-type(2) {
    bottom:66%;
}
#allCustomerBox .customerBox .eatingBar:nth-of-type(3) {
    
    bottom:34%;
}
#allCustomerBox .customerBox .eatingBar:nth-of-type(4) {
    bottom:2%;
    
}
#allCustomerBox .customerBox .eatingBar .inline-Bar1 {
    background-color: rgb(175, 2, 2);
}
#allCustomerBox .customerBox .eatingBar .inline-Bar2 {
    background-color: green;
}
#allCustomerBox .customerBox .eatingBar .inline-Bar3 {
    background-color: rgb(253, 142, 51);
}
#allCustomerBox .customerBox .eatingBar .inline-Bar4 {
    background-color: rgb(19, 7, 37);
}
.waitCustomerBox .cookingBar .inline-Bar5 {
    background-color: rgb(28, 97, 245);
}
#allCustomerBox .customerBox .eatingBar p {
    position:relative;
}
#allCustomerBox .customerBox .eatingBar .drawLine {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    height:1px;
    width:80%;
    background-color: white;
    display:none;
}
#allCustomerBox .customerBox .eatingBar .shade,.waitCustomerBox .cookingBar .inline-Bar5 .shade {
    height:100%;
    width:0px;
    left:0;
}
#allCustomerBox .customerBox .checkout,#allCustomerBox .customerBox .placate {
    position:absolute;
    width:30px;
    height:30px;
    right:62%;
    top:62%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
    padding:0;
    display:none;
}
#allCustomerBox .customerBox .placate {
    width:18px;
    height:18px;
    right:71%;
    top:71%;
}
#allCustomerBox .customerBox .checkout img ,#allCustomerBox .customerBox .placate img{
    width:49px;
    height:49px;
}
#allCustomerBox .waitCustomerBox {
    margin:0;
    position:absolute;
    bottom:-20%;
    left:80%;
}
#allCustomerBox #waitCustomerBox1 {
    left:65%;
}
#allCustomerBox #waitCustomerBox2 {
    left:50%;
}
#allCustomerBox #waitCustomerBox3 {
    left:35%;
}
#allCustomerBox #waitCustomerBox4 {
    left:20%;
}
#allCustomerBox #waitCustomerBox5 {
    left:5%;
}
.gameBegin,.buyChef,.fryChef{
    position:fixed;
    top:50%;
    transform: translate(-50%,-50%);
    z-index:2;
}
.gameBegin .inline-Box ,.menu .inline-Box, .buyChef .inline-Box,.fryChef .inline-Box{
    background-color: rgb(255, 190, 50);
    align-items:unset;
    padding:5%;
    box-sizing: border-box;
}
.gameBegin .inline-Box h1,.gameBegin .inline-Box p, .buyChef .inline-Box h1,.buyChef .inline-Box p,.fryChef .inline-Box p{
    margin:0;
    font-weight: unset;
}

.gameBegin .inline-Box .things {
    display:flex;
    align-items: center;
    justify-content: left;
    height:20px;
    width:100%;
    margin:0;
}
.gameBegin .inline-Box .things p {
    margin-right: 16.5%;
}
.gameBegin .inline-Box .things p:nth-of-type(3) {
    margin:0;
}
.gameBegin .play{
    width:100%;
    border:1px solid black;
    height:50px;
    border-radius:25px;
    background-color: rgb(116, 66, 1);
    margin-top:4%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.gameBegin .play .inline-Box {
    height:46px;
    border-radius:23px;
    width:98%;
    overflow:hidden;
}
.gameBegin .play .inline-Box p {
    margin-top:-2%;
    font-size:19px;
    font-weight:600;
}
.menu {
    position:fixed;
    top:50%;
    transform: translate(-50%,-50%);
    z-index:2;
    height:83%;
    display:none;
}
.menu .inline-Box {
    height:98%;
}
.menu .customerBox {
    margin:0;
    position:fixed;
    left:8%;
    top:-3%;
}
.menu .orderDishes {
    position:fixed;
    right:6%;
    top:1%;
}
.menu .menu-border {
    position:fixed;
    width:86%;
    height:74%;
    top:10%;
    left:50%;
    transform: translateX(-50%);
    border:1px solid black;
    background-color: rgb(179, 142, 20);
    border-radius: 4px;
    display:flex;
    align-items: center;
    justify-content: center;
}
.menu .menu-border .inline-border {
    width:98%;
    height:99%;
    background-color: white;
    display:flex;
    flex-direction: column;
}
.menu .menu-border .inline-border p {
    margin:0;
}
.menu .menu-border .inline-border .allDishes {
    margin-left:6%;
    margin-top: 5%;
}
.menu .menu-border .inline-border .dishes {
    margin:4% 0 0 10%;
    position:relative;
}
.menu .menu-border .inline-border .dishes input {
    margin-right: 5%;
}
.menu .menu-border .inline-border .dishes span {
    position:absolute;
    right:5%;
}
.menu .orderCompleteBorder,.menu .noeat ,.confirmRecruitment,.buyChef .noRecruitment,.fryChef .confirmFry,.fryChef .noFry{
    width:55%;
    height:50px;
    position:absolute;
    bottom:6%;
    left:5%;
    border-radius: 25px;
    background-color:rgb(179, 142, 20);
    display:flex;
    align-items: center;
    justify-content: center;
}
.orderCompleteBorder .inline-Box ,.noeat .inline-Box,.confirmRecruitment .inline-Box,.noRecruitment .inline-Box,.fryChef .confirmFry .inline-Box,.fryChef .noFry .inline-Box {
    width:97.5%;
    height:45px;
    border-radius:24px;
    overflow:hidden;
}
.orderCompleteBorder .inline-Box p ,.noeat .inline-Box p,.confirmRecruitment .inline-Box p,.noRecruitment .inline-Box p,.confirmFry .inline-Box p,.noFry .inline-Box p{
    margin-top:2%;
    font-size:15px;
    font-weight:600;
}
.menu .noeat,.buyChef .noRecruitment,.fryChef .noFry {
    width:30%;
    left:65%;
}
.menu .noeat .inline-Box ,.buyChef .noRecruitment .inline-Box, .fryChef .noFry .inline-Box{
    width:96%;
}
.noeat .inline-Box p{
    margin-top:8%;
}
.fryChef,.buyChef {
    display:none;
}
.buyChef .inline-Box ,.fryChef .inline-Box{
    padding:1%;
    display:block;
}
.buyChef .inline-Box h1 ,.fryChef .inline-Box h1{
    margin:0 auto;
    position:absolute;
    left:50%;
    top:3%;
    transform: translateX(-50%);
}
.buyChef .inline-Box p,.fryChef .inline-Box p ,.confirmFry .inline-Box p,.noFry .inline-Box p{
    font-size:14px;
    margin-top: 2%;
    margin-left: 2%;
}
.buyChef .inline-Box p:nth-of-type(1) ,.fryChef .inline-Box .one{
    margin-top: 15%;
}
.confirmRecruitment,.confirmFry{
    left:3%;
}
.confirmRecruitment .inline-Box p ,.confirmFry .inline-Box p{
    position:absolute;
    bottom: 30%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
}
.noRecruitment .inline-Box p ,.noFry .inline-Box p{
    position:absolute;
    bottom: 30%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
}
.moneyAlert, .needAlert,.finishAlert,.chefAlert{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:66%;
    height:25%;
    background-color: rgb(240, 95, 191);
    border-radius: 20px;
    border:6px solid white;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.moneyAlert {
    display:none;
}
.needAlert,.finishAlert ,.chefAlert{
    width:80%;
    height:30%;
    top:-2%;
    padding:5%;
    box-sizing: border-box;
}
.needAlert {
    display:none;
}
.needAlert p{
    font-size: 14px;
    line-height: 22px;
}
.finishAlert ,.chefAlert{
    background-color:rgb(128, 245, 99);
}
.finishAlert {
    display:none;
}
.finishAlert p ,.chefAlert p{
    font-size: 14px;
    margin:0;
}
.chefAlert {
    top:-10%;
    display:none;
}

